<template>
	<view class="page padding-lr">
		<view class="text-lg flex padding-tb" style="color: #4D4D4D;">
			<view>
				<view style="width: 32rpx;height: 20rpx;margin: 0 auto;">
					<image src="../../static/sanjiao.png" mode="widthFix"></image>
				</view>
				<view class="jindu"></view>
				<text class="wz" style="color: #4E8CEE;">选择入驻类型</text>
			</view>
			<view>
				<view style="width: 32rpx;height: 20rpx;margin: 0 auto;">
				</view>
				<view class="jindu jindu2"></view>
				<text class="wz">选择认证类型</text>
			</view>
			<view>
				<view style="width: 32rpx;height: 20rpx;margin: 0 auto;">
				</view>
				<view class="jindu jindu3"></view>
				<text class="wz">填写认证材料</text>
			</view>
		</view>
		<view class="bg-white padding margin-bottom  flex radius-16" v-for="(item, index) in list" :key="index"
			@click="handlePackage(item.id,index,item.name)">
			<view style="width:140rpx;height: 100%;margin-right: 25rpx;">
				<image :src="item.img" mode="widthFix"></image>
			</view>
			<view style="width: 80%;">
				<view class="padding-bottom-sm  text-df flex justify-between align-center">
					<text class="text-blod">{{ item.name }}</text>
					<!-- <view class="text-price price">{{ item.money }}/年</view> -->
				</view>
				<!-- <view class="padding-tb radius solid-bottom text-df flex justify-between align-center">
					<view>套餐名称</view>
					<view >{{ item.description }}</view>
				</view> -->
				<view class="padding-tb-sm radius  text-df flex justify-between align-center">
					<view>最大商品添加数量</view>
					<!-- <view>{{ item.goods_num }}个</view> -->
				</view>
				<!-- <view class="padding-tb-sm radius  text-df flex justify-between align-center">
					<view>平台抽成比例</view>
					<view>{{ item.merchant_ratio+'%' }}</view>
				</view> -->
			</view>
			<view style="line-height: 50rpx;">
				<image style="max-width: 20rpx;max-height: 30rpx;margin-top: 50rpx;" src="/static/right-arrow.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			this.store_level();
		},
		methods: {
			store_level() {
				this.$api
					.post(global.apiUrls.store_level)
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							this.list = res.data.data;
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			handlePackage(id, index,title) {
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				let store_user_id = uni.getStorageSync('store_user_id') || 0;
				this.$api
					.post(global.apiUrls.submitLevel, {
						store_level: id
					}, {
						header: {
							Storeid: store_joinin_id,
							Userid: store_user_id
						}
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							uni.navigateTo({
								url: `/shop/shop/shop-package/type?type=${id}&title=${title}`
							});
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.price {
		padding: 10rpx 24rpx;
		color: $theme;
		background: #F8F8F8;
		;
		border-radius: 32rpx;
	}

	.radius-16 {
		border-radius: 16rpx;
	}

	.jindu {
		width: 220rpx;
		height: 14rpx;
		background: #4E8CEE;
		border-radius: 14rpx 0px 0px 14rpx;
		margin-top: 20rpx;
	}

	.jindu2 {
		background: #b4caf1;
		border-radius: 0px;
		margin: 20rpx 5px 0 5px;
	}

	.jindu3 {
		background: #b4caf1;
		border-radius: 0px 14rpx 14rpx 0px;
	}

	.wz {
		display: block;
		margin-top: 10px;
		font-size: 28rpx;
	}

	.text-blod {
		font-weight: bold;
		color: #333;
	}
</style>